<script setup>
import { Head, Link } from '@inertiajs/vue3'
import { computed } from 'vue'
import SpotlightLayout from '@/Layouts/SpotlightLayout.vue'
import Container from '@/Components/Spotlight/Container.vue'
import { formatDate } from '@/Components/Spotlight/utils/formatDate.js'

const props = defineProps({
  series: {
    type: Object,
    required: true,
  },
  posts: {
    type: Array,
    default: () => [],
  },
  seriesList: {
    type: Array,
    default: () => [],
  },
})

const navigationSeries = computed(() =>
  props.seriesList.map((item) => ({
    ...item,
    href: route('blog.series.show', item.slug, false),
  })),
)

const articles = computed(() =>
  props.posts.map((post) => ({
    id: post.id,
    title: post.title,
    href: route('blog.posts.show', post.slug, false),
    publishedAt: formatDate(post.published_at),
  })),
)
</script>

<template>
  <SpotlightLayout :title="series.name">
    <Head :title="series.name" />

    <Container class="mt-16 sm:mt-20 lg:mt-24">
      <div
        class="grid gap-10 lg:grid-cols-[minmax(0,240px)_minmax(0,1fr)] lg:gap-16"
      >
        <aside class="rounded-3xl bg-zinc-50/50 p-6 dark:bg-zinc-900/50">
          <h2 class="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
            系列列表
          </h2>
          <nav class="mt-4 space-y-2">
            <Link
              v-for="item in navigationSeries"
              :key="item.id"
              :href="item.href"
              class="block rounded-xl px-4 py-2 text-sm font-medium transition"
              :class="[
                item.is_current
                  ? 'bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-300'
                  : 'text-zinc-600 hover:bg-white/80 hover:text-primary-600 dark:text-zinc-300 dark:hover:bg-zinc-800/60 dark:hover:text-primary-300'
              ]"
            >
              {{ item.name }}
            </Link>
          </nav>
        </aside>

        <section class="space-y-6">
          <header class="space-y-2">
            <p class="text-sm font-semibold text-primary-600 dark:text-primary-400">
              {{ series.post_count }} 篇文章 · 最近更新 {{ formatDate(series.updated_at || series.created_at) }}
            </p>
            <h1 class="text-3xl font-bold tracking-tight text-zinc-800 sm:text-4xl dark:text-zinc-100">
              {{ series.name }}
            </h1>
            <p v-if="series.description" class="text-base text-zinc-600 dark:text-zinc-400">
              {{ series.description }}
            </p>
          </header>

          <div v-if="articles.length" class="rounded-3xl bg-zinc-50/50 p-6 dark:bg-zinc-900/50">
            <ul class="divide-y divide-zinc-200/50 text-sm dark:divide-zinc-800/50">
              <li
            v-for="article in articles"
            :key="article.id"
                class="flex items-center justify-between gap-4 py-3"
              >
                <Link
            :href="article.href"
                  class="flex-1 truncate text-base font-medium text-zinc-800 transition hover:text-primary-600 dark:text-zinc-100 dark:hover:text-primary-300"
                >
                  {{ article.title }}
                </Link>
                <time class="shrink-0 text-xs text-zinc-400 dark:text-zinc-500">
                  {{ article.publishedAt }}
                </time>
              </li>
            </ul>
          </div>
          <p v-else class="rounded-3xl bg-zinc-50/30 p-8 text-sm text-zinc-500 dark:bg-zinc-900/30 dark:text-zinc-400">
          该系列正在创作中，敬请期待新文章。
        </p>
        </section>
      </div>
    </Container>
  </SpotlightLayout>
</template>
